<template>
  <div class="app-container">
    <el-watermark
      :content="['Liwen-左左√', '']"
      :gap="[200, 350]"
      :width="200"
      :height="100"
      :font="font"
    >
      <el-row :gutter="20">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            @submit.prevent
          >
            <el-form-item label="" prop="keys">
              <el-input
                placeholder="请输入库名、表名、模块"
                clearable
                v-model="queryParams.searchValue"
                style="width: 250px; height: 35px"
                @change="handleQuery()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd()"
                v-hasPermi="['ds:agreement:add']"
                >新增
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleEdit()"
                v-hasPermi="['ds:agreement:edit']"
                >修改
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['ds:agreement:remove']"
                >删除
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button plain type="info" @click="drawer = true"
                >查看接口
              </el-button>
            </el-form-item>
          </el-form>

          <el-table
            border
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
            ref="tableRef"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" width="50px" type="index" />
            <el-table-column
              label="进件标识"
              prop="appNo"
              width="200px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="数据源"
              prop="appCode"
              width="100px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="归属系统"
              prop="modelName"
              width="100px"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <span v-if="scope.row.modelName == 'hx'">红线</span>
                <span v-else-if="scope.row.modelName == 'wg'">网关</span>
                <span v-else>美盾</span>
              </template>
            </el-table-column>

            <el-table-column label="响应报文">
              <template #default="scope">
                <p @click="bodyJson(scope.row.repBody)">
                  {{ scope.row.repBody.substr(0, 40) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              label="响应状态"
              prop="repFlag"
              width="120px"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <el-tag
                  size="large"
                  type="success"
                  v-if="scope.row.repFlag == 1"
                  style="width: 80%"
                >
                  SUCCESS
                </el-tag>
                <el-tag
                  size="large"
                  type="danger"
                  v-if="scope.row.repFlag == 2 || scope.row.repFlag == 5"
                  style="width: 80%"
                >
                  FAIL
                </el-tag>
                <el-tag
                  size="large"
                  type="success"
                  v-if="scope.row.repFlag == 3"
                  style="width: 80%"
                >
                  查得
                </el-tag>
                <el-tag
                  size="large"
                  type="warning"
                  v-if="scope.row.repFlag == 4"
                  style="width: 80%"
                >
                  未查得
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否启用" prop="isOpen" width="80px">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isOpen"
                  inline-prompt
                  active-text="启用"
                  inactive-text="关闭"
                  disabled
                />
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              prop="createBy"
              width="100px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="180px"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="reload()"
          />
        </el-col>
      </el-row>
      <!-- 编辑 -->
      <AddEditForm
        v-model:visible="isShowEditForm"
        v-if="isShowEditForm"
        :data="current"
        @done="reload"
      />

      <!-- 接口列表 -->
      <el-drawer v-model="drawer" title="接口列表" direction="rtl" size="40%">
        <p>
          <span> 红线|美盾：</span>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span> http://localhost:8773/leakage/visit/mk</span>
        </p>
        <p>
          <span> 红线决策引擎：</span>
          <span> http://localhost:8773/leakage/visit/mk/decision</span>
        </p>
        <p>
          <span> 网关：</span>
          <span>
            http://localhost:8773/leakage/visit/mk/wg?serviceCode=011426
          </span>
        </p>
        <!-- <el-descriptions>
          <el-descriptions-item label="">http:localhost:8773/leakage/visit/mk</el-descriptions-item>
          <br/>
          <el-descriptions-item label="网关：">http:localhost:8773/leakage/visit/mk/wg?serviceCode=011426</el-descriptions-item>
        </el-descriptions> -->
      </el-drawer>
      <div>
        <JsonView
          v-model:visible="responseBodyDialogVisible"
          v-if="responseBodyDialogVisible"
          :data="repBody"
        />
      </div>
    </el-watermark>
  </div>
</template>

<script setup name="hx">
import { dsAgreementApi } from "@/api/kernel/ds-agreement.js";
import AddEditForm from "./add-edit-form.vue";
import JsonView from "@/views/kernel/common/json-view/index.vue";

import { h, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

const responseBodyDialogVisible = ref(false);
const repBody = ref("");
const bodyJson = (val) => {
  repBody.value = val;
  responseBodyDialogVisible.value = true;
};

const drawer = ref(false);
const font = reactive({
  color: "#87cefa",
  fontSize: 18,
});

const tableRef = ref(null);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  searchValue: "",
});
const total = ref(0);
const loading = ref(true);

const { proxy } = getCurrentInstance();

const list = ref([]);
const single = ref(true);
const multiple = ref(true);
const current = ref(null);
const reload = () => {
  current.value = null;
  dsAgreementApi
    .getPageList(proxy.addDateRange(queryParams.value))
    .then((res) => {
      list.value = res.rows;
      total.value = res.total;
      loading.value = false;
    });
};
//# 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  reload();
};
//#- 重置
const resetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.searchValue = "";

  reload();
};

//#- 多选
const ids = ref([]);
const selectionList = ref([]);
const handleSelectionChange = (selection) => {
  selectionList.value = selection;
  single.value = selection.length != 1;
  if (selection.length == 1) {
    selection.map(function (item, i) {
      current.value = item;
    });
  }
  multiple.value = !selection.length;
};
//#- 编辑
const isShowEditForm = ref(false);

const handleEdit = () => {
  isShowEditForm.value = true;
};
const handleAdd = () => {
  isShowEditForm.value = true;
};
//#- 删除
const handleDelete = () => {
  ids.value = selectionList.value.map((item) => item.trId);
  let title = selectionList.value.map((item) => {
    let appNo = item.appNo;
    return appNo;
  });
  ElMessageBox({
    title: `Message`,
    message: h("p", null, [
      h("span", null, "确认要删除 "),
      h("span", { style: "color: red" }, `${title}`),
    ]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      dsAgreementApi.remove(ids.value).then((res) => {});
      setTimeout(() => {
        ElMessage({
          type: "success",
          message: `删除成功！`,
        });
        reload();
      }, 1000);
    })
    .catch(() => {
      tableRef.value.clearSelection();
    });
};

onMounted(() => {
  reload();
});
</script>
<style>
.winClass {
  width: 100%;
}
</style>
